<template>
	<div class="indexmap">
	    <div id="mapbox"></div>
	    <div class="menubox">
	        <div class="item">
	            <img src="@/assets/third/nav.png" />
	        </div>
	        <div class="line"></div>
	        <div class="item">
	            <img src="@/assets/third/dantitu.png" />
	        </div>
	        <div class="line"></div>
	        <div class="item">
	            <img src="@/assets/third/cheliang.png" />
	        </div>
	        <div class="line"></div>
	        <div class="item">
	            <img src="@/assets/third/mianji.png" />
	        </div>
	        <div class="line"></div>
	        <div class="item">
	            <img src="@/assets/third/juanlian.png" />
	        </div>
	        <div class="line"></div>
	        <div class="item">
	            <img src="@/assets/third/dayin.png" />
	        </div>
	        <div class="line"></div>
	        <div class="item">
	            <img src="@/assets/third/quanping.png" />
	        </div>
	        <div class="line"></div>
	        <div class="item">
	            <img src="@/assets/third/delete.png" />
	        </div>
	    </div>
			<!-- 审查弹框 -->
			<div class="reviewDialog">
				<!-- 阴影部分 -->
				<div style="height:30px"></div>
				<!-- 关闭按钮 -->
				<i class="el-icon-close closeBtn"></i>
				<el-tabs tab-position="left">
					<el-tab-pane label=" 综合监管 ">
						<el-tabs>
							<el-tab-pane label="综合监管">
								<div style="overflow: auto;height:400px">
									<el-row class="lineRow" v-for="item in 10" :key="item">
										<el-col :span="24" class="mb-1">
											测绘单位：重庆东方测绘有限公司
										</el-col>
										<el-col :span="9">
											测绘人员：张小明
										</el-col>
										<el-col :span="9">
											测绘时间：2018年4月30日
										</el-col>
										<el-col :span="3" :offset="3">
											<el-button type="primary" size="mini">查看</el-button>
										</el-col>
										<el-col :span="9">
											测绘地点：路孔镇尚书村一组
										</el-col>
										<el-col :span="9">
											位置：坐标X 107.45；坐标Y 302.09
										</el-col>
									</el-row>
								</div>
							</el-tab-pane>
						</el-tabs>
					</el-tab-pane>
					<el-tab-pane label=" 审查意见 " style="position:relative">
						<el-tabs>
							<el-tab-pane label="业内审查意见">
								<component :is="currentComponent" @handleCancel="handleCancel"></component>
							</el-tab-pane>
						</el-tabs>
						<div style="position: absolute;right:20px;top:0">
							<el-button type="primary" size="mini" @click="handleAddComment" :disabled="isAdd">新增</el-button>
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>
	</div>
</template>

<script>
	import commentsList from "./commentsList.vue"
	import commentsAdd from "./commentsAdd.vue"
	export default {
		data(){
			return {
				currentComponent:commentsList,
				isAdd:false,
			}
		},
		methods:{
			//审查意见新增
			handleAddComment:function () {
				this.currentComponent = commentsAdd;
				this.isAdd = true;
			},
			//取消审查意见
			handleCancel:function () {
				this.currentComponent = commentsList;
				this.isAdd = false;
			}
		}
}
</script>

<style scoped="scoped" lang="scss">
	.indexmap{
	    .menubox{
	        width:40px;
	        height:390px;
	        background:#ffffff;
	        border-radius:2px;
	        left: 40px;
	        top: 40px;
	        position: absolute;
	        .item{
	            display: flex;
	            align-items: center;
	            justify-content: center;
	            height: 48px;
	            cursor: pointer;
	            img{
	                width: 24px;
	                height: 24px;
	            }
	        }
	        .line{
	            width: 18px;
	            height: 1px;
	            margin: auto;
	            background: #E6E6E6;
	        }
	    }
			.reviewDialog{
				border-radius:4px;
				background-color: #fff;
				width:760px;
				height:500px;
				position: absolute;
				left:calc(50% - 300px);
				top:100px;
				font-size:14px;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(140,140,140,1);
				.lineRow{
					padding:20px 0 20px 0;
					margin-left:15px;
					border-bottom: 1px solid rgba(225,226,230,1);
				}
				.closeBtn{
					position: absolute;
					top:-20px;
					right:-20px;
					font-size: 20px;
					cursor: pointer;
				}
			}
			.reviewDialog:before{
				content:"";
				display:inline-block;
				height:100%;
				width:96px;
				position: absolute;
				left:0;
				top:0;
				border-radius: 4px 0 0 4px;
				background:rgba(247,248,250,1);
			}
	}
</style>
